import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './add.css';
import { Button } from 'react-vant';
import { Toast } from 'antd-mobile';

const Bedding = () => {
    const navigate = useNavigate();
    const [items, setItems] = useState({
        extraBed: 0,
        extraBlanket: 0,
        extraPillow: 0
    });
    const [roomNumber, setRoomNumber] = useState('');
    const [submitted, setSubmitted] = useState(false);

    const handleBack = () => {
        navigate(-1);
    };

    const updateItem = (item, value) => {
        if (value >= 0 && value <= 5) {
            setItems({
                ...items,
                [item]: value
            });
        }
    };

    const handleSubmit = () => {
        if (!roomNumber) {
            alert('请输入房间号');
            return;
        }

        if (items.extraBed === 0 && items.extraBlanket === 0 && items.extraPillow === 0) {
            alert('请至少选择一项服务');
            return;
        }

        setSubmitted(true)

    setTimeout(() => {
      Toast.show({
        content: '请求已提交',
        position: 'top',
      })
      setItems({
        extraBed: 0,
        extraBlanket: 0,
        extraPillow: 0
      })
      setSubmitted(false)
    }, 1500);
    };

    return (
        <div>
            <div className="ljl-parking-header">
                <button className="ljl-back-button" onClick={handleBack}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="30" height="30">
                        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
                    </svg>
                </button>
                <h1 className="ljl-header-title">加床加被</h1>
                <div className="ljl-header-right">
                    <div className="ljl-dots-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24">
                            <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
                        </svg>
                    </div>
                </div>
            </div>

            <div className='ljl-add-bottom-box'>
                <div>
                    <div className='ljl-add-bottom-box-h2'>房间用品服务</div>
                    <div>
                        <div className='ljl-add-bottom-box-houseHao'>
                            请输入房间号：
                        </div>
                        <input
                            type="text"
                            value={roomNumber}
                            onChange={(e) => setRoomNumber(e.target.value)}
                            placeholder="例如：301"

                            className='ljl-add-bottom-box-input'
                        />
                    </div>

                    <div>
                        <div className='ljl-add-bottom-box-need'>请选择需要的物品</div>

                        {/* 加床选择 */}
                        <div className='ljl-add-bottom-box-need-first'>
                            <div className='ljl-add-bottom-box-need-first-left'>
                                <div className='ljl-add-bottom-box-need-bedding'>加床</div>
                                <div className='ljl-add-bottom-box--need-beizhu'>适合一人使用的单人床</div>
                            </div>
                            <div className='ljl-add-bottom-box-button'>
                                <button
                                    onClick={() => updateItem('extraBed', items.extraBed - 1)}
                                    style={{

                                        cursor: items.extraBed > 0 ? 'pointer' : 'default',
                                        color: items.extraBed > 0 ? '#333' : '#ccc'
                                    }}
                                    className='ljl-add-bottom-box-jian'
                                    disabled={items.extraBed <= 0}
                                >
                                    -
                                </button>
                                <span className='ljl-add-bottom-box-span'>
                                    {items.extraBed}
                                </span>
                                <button
                                    onClick={() => updateItem('extraBed', items.extraBed + 1)}
                                    style={{
                                        cursor: items.extraBed < 5 ? 'pointer' : 'default',
                                        color: items.extraBed < 5 ? '#333' : '#ccc'
                                    }}
                                    className='ljl-add-bottom-box-jia'
                                    disabled={items.extraBed >= 5}
                                >
                                    +
                                </button>
                            </div>
                        </div>

                        {/* 加被子选择 */}
                        <div className='ljl-add-bottom-box-need-first'>
                            <div className='ljl-add-bottom-box-need-first-left'>
                                <div className='ljl-add-bottom-box-need-bedding'>加被子</div>
                                <div className='ljl-add-bottom-box--need-beizhu'>四季被/空调被</div>
                            </div>
                            <div className='ljl-add-bottom-box-button'>
                                <button
                                    onClick={() => updateItem('extraBlanket', items.extraBlanket - 1)}
                                    style={{
                                        cursor: items.extraBlanket > 0 ? 'pointer' : 'default',
                                        color: items.extraBlanket > 0 ? '#333' : '#ccc',

                                    }}
                                    className='ljl-add-bottom-box-jian'
                                    disabled={items.extraBlanket <= 0}
                                >
                                    -
                                </button>
                                <span className='ljl-add-bottom-box-span'>
                                    {items.extraBlanket}
                                </span>
                                <button
                                    onClick={() => updateItem('extraBlanket', items.extraBlanket + 1)}
                                    style={{
                                        cursor: items.extraBlanket < 5 ? 'pointer' : 'default',
                                        color: items.extraBlanket < 5 ? '#333' : '#ccc'
                                    }}
                                    className='ljl-add-bottom-box-jia'
                                    disabled={items.extraBlanket >= 5}
                                >
                                    +
                                </button>
                            </div>
                        </div>

                        {/* 加枕头选择 */}
                        <div className='ljl-add-bottom-box-need-first'>
                            <div className='ljl-add-bottom-box-need-first-left'>
                                <div className='ljl-add-bottom-box-need-bedding'>加枕头</div>
                                <div className='ljl-add-bottom-box--need-beizhu'>软枕/硬枕</div>
                            </div>
                            <div className='ljl-add-bottom-box-button'>
                                <button
                                    onClick={() => updateItem('extraPillow', items.extraPillow - 1)}
                                    style={{
                                        cursor: items.extraPillow > 0 ? 'pointer' : 'default',
                                        color: items.extraPillow > 0 ? '#333' : '#ccc'
                                    }}
                                    className='ljl-add-bottom-box-jian'
                                    disabled={items.extraPillow <= 0}
                                >
                                    -
                                </button>
                                <span className='ljl-add-bottom-box-span'>
                                    {items.extraPillow}
                                </span>
                                <button
                                    onClick={() => updateItem('extraPillow', items.extraPillow + 1)}
                                    style={{
                                        cursor: items.extraPillow < 5 ? 'pointer' : 'default',
                                        color: items.extraPillow < 5 ? '#333' : '#ccc'
                                    }}
                                    className='ljl-add-bottom-box-jia'
                                    disabled={items.extraPillow >= 5}
                                >
                                    +
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Button loading={submitted} loadingText='提交中...' onClick={handleSubmit} type='info' className='ljl-clear-bottom-button'>提交</Button>
        </div>
    );
};

export default Bedding; 